@fontFamily: '微软雅黑', 'Microsoft YaHei', '黑体', Roboto,Helvetica,Arial,sans-serif;

html {
    font-size: 16px;
}

body {
    font-family: @fontFamily;
    padding-top: 80px;
    -webkit-font-smoothing: antialiased;
}

.h1, .h2, .h3, .h4, h1, h2, h3, h4, h5, h6 {
    font-family: @fontFamily;
}

button, html, input, select, textarea {
    font-family: @fontFamily;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

// ui bootstrap
.normal-image {
    max-width: 100%;
}

.va-m {
    vertical-align: middle;
}

.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }

#navbar_logo {
    display: inline;
    vertical-align: middle;
    border: 1px solid white;
    border-radius: 3px;
    margin-right: 10px;
    font-size: 12px;
    padding: 3px;
}

#gh-star {
    position: absolute;
    right: 16px;
    top: 18px;
}

@media (max-width: 1199px) {
    #gh-star{
        top: 12px;
    }
}

#if_form {
    border: 5px solid white;
    padding: 30px 60px;
    &.dropping {
        border: 5px dashed #666;
        border-radius: 15px;
        background: #FFC;
    }
    .alert, .panel {
        max-width: 80%;
        margin-top: 40px;
    }
    .progress {
        margin-top: 23px;
        position: relative;
        overflow: visible;
        .progress-tip {
            position: absolute;
            top:0;
            transition: left .6s ease;
        }
    }
    .control-label {
        font-size: 16px;
        margin-top: 10px;
        color: #999;
    }
    .form-group {
        margin-top: 15px;
    }
    .toggle-input {
        display: inline-block;
        padding: 1px;
        border: 1px solid silver;
        color: silver;
        margin-right: 10px;
        margin-bottom: 5px;
        width: 60px;
        text-align: center;

        &:hover, &:focus, &:active {
            text-decoration: none;
        }

        &.active {
            border-color: #2187e7;
            color: #2187e7;
        }
    }
    input[type=number] {
        border: 1px solid #2187e7;
        margin-bottom: 5px;
        margin-right: 10px;
        width: 60px;
        text-align: center;
        color: #2187e7;

        &:focus, &:active {
            border-color: #2066b8;
        }
    }
    .radio label {
        padding-left: 35px;
        line-height: 1.2em;
    }
}

@media (max-width: 991px) {
    #if_form .alert, #if_form .panel {
        max-width: 100%;
    }
}

.row-margin {
    margin: 40px -15px 30px;
    > div {
        padding-top: 10px;
    }
}
.container.container-article {
    margin-bottom: 40px;
    h1 {
        margin-bottom: 35px;
    }
    p {
        padding-bottom: 25px;
    }
    dl {
        dt {
            margin-bottom: 10px;
            font-size: 16px;
        }
    }
}
.container.container-single {
    img {
        border: 15px solid #ddd;
        border-radius: 15px;
        margin: 5px 0 10px;
    }
}
.red-dot {
    background-color: #ff3333;
    position: absolute;
    width: 8px;
    height: 8px;
    right: 10px;
    top: 30%;
    border-radius: 4px;
    z-index: -1;
}
@media (max-width: 768px) {
    .red-dot {
        right: auto;
    }
}
.panel .panel-body {
    padding: 20px 40px;
}
.grey {
    color: grey;
}
.silver {
    color: silver;
}
.width-50 {
    width: 50px;
}
.inline-block {
    display: inline-block;
}
.margin-left-10 {
    margin-left: 10px;
}
.margin-right-10 {
    margin-right: 10px;
}
.margin-right-20 {
    margin-right: 20px;
}
.margin-bottom-20 {
    margin-bottom: 20px;
}
.margin-bottom-30 {
    margin-bottom: 30px;
}
.margin-top-0 {
    margin-top: 0;
}
.margin-top-10 {
    margin-top: 10px;
}
.margin-top-20 {
    margin-top: 20px;
}
.padding-top-5 {
    padding-top: 5px;
}
.margin-10-0 {
    margin: 10px 0 !important;
}
.font-16 {
    font-size: 16px !important;
}
.no-margin {
    margin: 0 !important;
}
.no-padding {
    padding: 0 !important;
}
.bg-eee {
    background-color: #eee;
}
.index-section {
    padding: 60px 0;
    .col-md-3 {
        text-align: center;
    }
    h1 {
        font-size: 30px;
        text-align: center;
        margin-top: 0;
        margin-bottom: 20px;
    }
    h2 {
        font-size: 20px;
        font-weight: bold;
        color: black;
    }
    a.col-md-3 {
        padding-top: 20px;
        border-radius: 10px;
        &:hover {
            background-color: silver;
            text-decoration: none;
            -moz-transition: background-color 0.5s ease-in;
            -web-kittransition: background-color 0.5s ease-in;
            -o-transition: background-color 0.5s ease-in;
            -m-stransition: background-color 0.5s ease-in;
            transition: background-color 0.5s ease-in;
        }
        p {
            color: #333;
            &.description {
                min-height: 80px;
            }
        }
    }
}
span.string {
    color: #800;
}

.mt-10 {
    margin-top: 10px;
}

.ml-10 {
    margin-left: 10px;
}

.lh-28 {
    line-height: 28px;
}

.flex {
    display: flex;
}

.panel-heading {
    cursor: pointer;
}

.no-radius {
    border-radius: 0 !important;
    img {
        border-radius: 0 !important;
    }
}
#tp_tabs {
    li a {
        font-size: 16px;
    }
}
#tp_contents {
    padding:30px 10px 0 10px;
    .icons-row {
        margin-bottom: 35px;
    }
    .icons-col {
        font-weight: normal;
        text-align: center;
        padding-top:30px;
        color: #999;
        font-size:11px;
    }
    .description {
        border-top: 1px solid silver;
        margin-top: 5px;
        padding-top: 5px;
    }
    .mobile_preview {
        position: relative;
        margin: 0 auto;
        width: 444px;
        height: 743px;

        &.iphonex_mobile_preview {
            height: 910px;
        }

        &.mac_mobile_preview {
            width: 800px;
            height: 470px;
        }
    }
}
#tp_android {
    .description {
        border-top-width: 0;
        line-height: 1.8em;
        margin-top: 0;
    }
    .icons-row {
        margin-bottom: 15px;
    }
}
#tp_ios, #tp_watch, #tp_webapp, #tp_phonegap, #tp_windowsphone, #tp_quasar, #tp_mac {
    .icons-row .icon-row {
        vertical-align: middle;
        height: 56px;
        line-height: 56px;
    }
    .sub-icon > div {
        padding: 0;
    }
    img {
        background-clip: padding-box;
        &.x1 {
            width: 29px;
            height: 29px;
            border-radius: 6px;
        }
        &.x2 {
            width: 40px;
            height: 40px;
            border-radius: 9px;
        }
        &.x3 {
            width: 56px;
            height: 56px;
            border-radius: 12px;
        }
        &.x4 {
            width: 61px;
            height: 61px;
            border-radius: 13px;
        }
        &.x5 {
            width: 80px;
            height: 80px;
            border-radius: 17px;
        }
    }
}
#tp_watch {
    img {
        &.x1 {
            border-radius: 14px;
        }
        &.x2 {
            border-radius: 20px;
        }
        &.x3 {
            border-radius: 28px;
        }
        &.x4 {
            border-radius: 30px;
        }
        &.watch {
            width: 47px;
            height: 47px;
            border-radius: 22.5px;
        }
    }
}
#tp_windowsphone, #tp_phonegap {
    img {
        &.x4 {
            margin-top: -6px;
        }
    }
}
#tp_windowsphone {
    img {
        border-radius: 0 !important;
        &.x5 {
            width: 75px;
            height: 75px;
            border-radius: 14px;
            margin-top: -20px;
        }
    }
}
#tp_mac {
    img {
        border-radius: 0 !important;
    }
}
#tp_custom {
    .inline-block {
        width: 25%;
        font-weight: normal;
        margin-top: 15px;
        margin-bottom: 15px;
        padding-left: 1%;
        padding-right: 1%;
    }
}
footer {
    text-align: center;
    color: white;
    padding: 20px 0;
}
.jumbotron h2 {
    font-size: 40px;
    margin-bottom: 20px;
}
#jumbotron_img_box {
    margin-top: -30px;
    position: relative;
    float: right;
    width: 128px;
    height: 128px;
}
#jumbotron_img {
    width: 128px;
    height: 128px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}
#jumbotron_img_loading {
    width: 128px;
    height: 128px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    .circle {
        background-color: rgba(0,0,0,0);
        border: 10px solid rgba(0,183,229,0.9);
        opacity: .9;
        border-right: 10px solid rgba(0,0,0,0);
        border-left: 10px solid rgba(0,0,0,0);
        border-radius: 128px;
        box-shadow: 0 0 55px #2187e7;
        width: 128px;
        height: 128px;
        margin: 0 auto;
        -moz-animation: spinPulse 1s infinite ease-in-out;
        -webkit-animation: spinPulse 1s infinite linear;
    }
    .circle1 {
        background-color: rgba(0,0,0,0);
        border: 10px solid rgba(0,183,229,0.9);
        opacity: .9;
        border-left: 10px solid rgba(0,0,0,0);
        border-right: 10px solid rgba(0,0,0,0);
        border-radius: 50px;
        box-shadow: 0 0 35px #2187e7;
        width: 60px;
        height: 60px;
        margin: 0 auto;
        position: relative;
        top: -95px;
        -moz-animation: spinoffPulse 1s infinite linear;
        -webkit-animation: spinoffPulse 1s infinite linear;
    }
}

/* Material Design */
.md-dialog-container {
    z-index: 1000009;
}

@-moz-keyframes spinPulse {
    0% {
        -moz-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7;
    }

    50% {
        -moz-transform: rotate(145deg);
        opacity: 1;
    }

    100% {
        -moz-transform: rotate(-320deg);
        opacity: 0;
    }
}

@-moz-keyframes spinoffPulse {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spinPulse {
    0% {
        -webkit-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7;
    }

    50% {
        -webkit-transform: rotate(145deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(-320deg);
        opacity: 0;
    }
}

@-webkit-keyframes spinoffPulse {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}
